<!-- 
改变前验证使用方法：
@beforeChange="beforeAaa"
beforeAaa(data) {
	if(data.index == 0) {
		data.callback(false);
	} else {
		data.callback(true);
	}
} 
 -->
<template>
	<view class="m-radio-group"
		:class="{solid: solid, equally: equally}"
		:style="{
			'--primary': primary
		}">
		<view class="list">
			<view v-for="(item, index) in options" :key="index"
				class="item"
				:class="{active: item[keys.value] == value}"
				:style="{
					width: itemWidth,
					height: itemHeight,
					fontSize: itemFontSize,
					borderTopLeftRadius: index == 0 ? itemBorderRadius : '',
					borderBottomLeftRadius: index == 0 ? itemBorderRadius : '',
					borderTopRightRadius: index == options.length-1 ? itemBorderRadius : '',
					borderBottomRightRadius: index == options.length-1 ? itemBorderRadius : '',
				}"
				@tap="change(item, index)"
				>{{item[keys.label]}}</view>
		</view>
	</view>
</template>
<script>
export default {
	name: '',
	data() {
		return {

		}
	},
	props: {
		value: {
			type: [Number, String],
			default: ''
		},
		// 配置项
		options: {
			type: Array,
			default: () => []
		},
		// 自定义字段
		fieldNames: {
			type: Object,
			default: () => ({})
		},
		// 配置大小，可选项：medium，small，mini
		size: {
			type: String,
			default: ''
		},
		// 宽度，单位默认为rpx
		width: {
			type: [Number, String],
			default: ''
		},
		// 高度,默认80rpx
		height: {
			type: [Number, String],
			default: ''
		},
		// 文字大小
		fontSize: {
			type: [Number, String],
			default: ''
		},
		// 圆弧大小，默认8rpx
		borderRadius: {
			type: [Number, String],
			default: ''
		},
		// 主题颜色
		primary: {
			type: String,
			default: '#2985F4'
		},
		// 实心按钮
		solid: {
			type: Boolean,
			default: false
		},
		// 均分的，如果设置了，默认占整行
		equally: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		keys () {
			let res = {label: 'label', value: 'value'};
			res = Object.assign(res, this.fieldNames);
			return res;
		},
		// 选项宽度，默认为空不设置
		itemWidth() {
			return typeof this.width == 'number' ? this.width+'rpx' : this.width;
		},
		// 选项高度，默认为空不设置
		itemHeight() {
			let res = this.height;
			if(!res) {
				switch(this.size) {
					case 'medium': res = 72; break;
					case 'small': res = 64; break;
					case 'mini': res = 56; break;
				}
			}
			return typeof res == 'number' ? res+'rpx' : res;
		},
		// 文字大小
		itemFontSize() {
			let res = this.fontSize;
			if(!res) {
				switch(this.size) {
					case 'mediumn': res = 28; break;
					case 'small': res = 24; break;
					case 'mediumn': res = 24; break;
				}
			}
			return typeof res == 'number' ? res+'rpx' : res;
		},
		// 圆弧，默认8rpx
		itemBorderRadius() {
			return typeof this.borderRadius == 'number' ? this.borderRadius+'rpx' : this.borderRadius;
		},
	},
	mounted() {

	},
	methods: {
		change(detail, index) {
			let isOk = true;
			// 判断是否有改变前验证
			if(this.$listeners.beforeChange) {
				this.$emit('beforeChange', {
					detail,
					index,
					callback: (value) => {
						isOk = !!value;
					}
				})
			}
			if(!isOk) {
				return;
			}
			this.$emit('input', detail[this.keys.value]);
			this.$emit('change', detail, index);
		}
	}
}
</script>
<style lang="less" scoped>
.m-radio-group {
	.list {
		padding-top: 2rpx;
		padding-left: 2rpx;
		&:after {
			content: '';
			display: block;
			clear: both;
		}
		.item {
			position: relative;
			float: left;
			margin-left: -2rpx;
			margin-top: -2rpx;
			padding: 0 30rpx;
			height: 80rpx;
			border: 2rpx solid #d9d9d9;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active {
				z-index: 1;
				border-color: var(--primary);
				color: var(--primary);
			}
			&:first-child {
				border-top-left-radius: 8rpx;
				border-bottom-left-radius: 8rpx;
			}
			&:last-child {
				border-top-right-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
			}
		}
	}
	// 实心
	&.solid {
		.list .item {
			border-color: var(--primary);
			color: var(--primary);
			&.active {
				color: #fff;
				background-color: var(--primary);
			}
		}
	}
	// 均分
	&.equally {
		width: 100%;
		.list {
			width: 100%;
			display: flex;
			.item {
				width: 0;
				flex: 1;
			}
		}
	}
}
</style>	